/**
`nuxt.config.ts` 是 Nuxt 3 应用的核心配置文件，用于定义应用的全局设置、模块、插件、路由等。
  1. 文件位置
  `nuxt.config.ts` 文件位于项目的根目录下。它是一个 TypeScript 文件，支持类型检查和智能提示。

  2. 基本结构
  `nuxt.config.ts` 的基本结构如下：

  ```typescript
  // nuxt.config.ts
  import { defineNuxtConfig } from 'nuxt'

  export default defineNuxtConfig({
    // 配置项
  })
  ```

  3. 常用配置项
  以下是一些常用的配置项：
  - app：应用相关的配置，包括页面标题、元信息等。

    ```typescript
    app: {
      head: {
        title: '我的 Nuxt 3 应用',
        meta: [
          { name: 'description', content: '这是我的 Nuxt 3 应用' },
          { name: 'keywords', content: 'Nuxt, Vue, 应用' }
        ]
      }
    }
    ```

  - css：全局 CSS 文件的引入。

    ```typescript
    css: ['~/assets/styles/main.css'],
    ```

  - plugins：全局插件的配置。

    ```typescript
    plugins: ['~/plugins/my-plugin.ts'],
    ```

  - modules：安装的 Nuxt 模块。

    ```typescript
    modules: [
      '@nuxtjs/axios', // 示例：Axios 模块
      '@nuxtjs/pwa'    // 示例：PWA 模块
    ],
    ```

  - build：构建相关的配置。

    ```typescript
    build: {
      extractCSS: true, // 提取 CSS
    },
    ```

  - runtimeConfig：运行时配置，可以在客户端和服务器端访问。

    ```typescript
    runtimeConfig: {
      public: {
        apiBase: '/api' // 公共访问的 API 基础路径
      },
      private: {
        apiSecret: process.env.API_SECRET // 仅服务器端可访问的配置
      }
    },
    ```

  4. 示例配置
  以下是一个示例 `nuxt.config.ts` 文件的完整配置：

  ```typescript
  // nuxt.config.ts
  import { defineNuxtConfig } from 'nuxt'

  export default defineNuxtConfig({
    app: {
      head: {
        title: '我的 Nuxt 3 应用',
        meta: [
          { name: 'description', content: '这是我的 Nuxt 3 应用' },
          { name: 'keywords', content: 'Nuxt, Vue, 应用' }
        ]
      }
    },
    css: ['~/assets/styles/main.css'],
    plugins: ['~/plugins/my-plugin.ts'],
    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/pwa'
    ],
    build: {
      extractCSS: true,
    },
    runtimeConfig: {
      public: {
        apiBase: '/api'
      },
      private: {
        apiSecret: process.env.API_SECRET
      }
    }
  })
  ```

  5. 注意事项
  - 类型检查：由于是 TypeScript 文件，可以享受类型检查的好处，减少错误。
  - 全局配置：这些配置项会影响整个应用的行为，因此在修改时要谨慎。

  6. 适用场景
  `nuxt.config.ts` 适用于需要全局配置的场景，例如设置应用的主题、引入全局样式、配置路由、安装模块等。

  希望以上总结能够帮助你更好地理解 Nuxt 3 中 `nuxt.config.ts` 的配置！如果有其他问题，欢迎随时询问。
 */
// https://nuxt.com/docs/api/configuration/nuxt-config
import ElementPlus from "unplugin-element-plus/vite";

export default defineNuxtConfig({
  modules: ["@pinia/nuxt"],
  css: [
    "@/assets/styles/main.css",
    "@/assets/styles/global.scss",
    "@/assets/cus-font/iconfont.css", // 自定字体图标
  ],
   // dev build
   build: {
    // 使用 Babel 进行语法转换
    transpile: ["element-plus/es"],
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 自动的给  scss 模块首行添加额外的数据:@use "@/assets/styles/variables.scss" as *;
          additionalData: '@use "@/assets/styles/variables.scss" as *;',
        },
      },
    },
    // 配置自动导入样式
    plugins: [ElementPlus()],
  },
  compatibilityDate: "2024-04-03", // 兼容性日期
  devtools: { enabled: true }, // 开启开发工具
  // 1.这里定义的运行时配置会不会打入到 process.env
  runtimeConfig: {
    appKey: "123456",
    appSecret: "abcdefg",
    public: {
      baseURL: "https://api.example.com", // server and client -> client_bundle.js
    },
  },

  // 2.定义应用的配置
  app: {
    // 给app所有的页面的head添加的配置(SEO, 添加外部的资源)
    head: {
      title: "My App",
      charset: "UTF-8",
      viewport:
        "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no",
      meta: [
        {
          name: "keywords",
          content: "Nuxt 3, Vue 3, JavaScript",
        },
        {
          name: "description",
          content: "A Nuxt 3 application built with Vue 3 and JavaScript.",
        },
      ],
      link: [
        {
          rel: "shortcut icon",
          href: "favicon.ico",
          type: "image/x-icon",
        },
      ],
      style: [
        {
          children: `body{ color: red }`,
        },
      ],
      // script: [
      //   {
      //     // src: "https://api.example.com/js",
      //   },
      // ],
    },
  },

  // 4. spa: 单页面应用
  ssr: false, // 服务器端渲染
  router: {
    options: {
      hashMode: true, // 使用hash模式
    },
  },
});
